<template>
  <div class="main-con flex1 vbox">
    <div class="search-con">
      <el-form :model="searchParam" :inline="true" label-width="105px">
        <el-form-item label prop="title">
          <el-input
            v-model.trim="searchParam.title"
            @keyup.enter.native="search"
            placeholder="输入消息标题查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="showToolbar" class="toolbar">
      <el-button icon="el-icon-plus" type="primary" @click="addMsg">新增公告</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="clickTab">
      <el-tab-pane label="普通消息" name="common"></el-tab-pane>
      <el-tab-pane label="订单消息" name="order"></el-tab-pane>
    </el-tabs>
    <div class="vbox flex1">
      <base-table
        v-show="activeName=='common'"
        ref="msgTable"
        url="message/getPage"
        code="htk"
        :selection="false"
        :param="searchParam"
        :cls="columns"
        :optionBtns="optionBtns"
        @handlerOption="handlerOption"
        @cell-click="cellClick"
        :option-width="205"
        :pageSizes="pageSizes"
      ></base-table>
      <base-table
        v-show="activeName=='order'"
        ref="msgOrderTable"
        url="message/getPage"
        @view-order="viewOrder"
        :pageSizes="pageSizes"
        code="htk"
        :selection="false"
        :param="searchParam"
        :cls="orderColumns"
        :optionBtns="optionBtns"
        @handlerOption="handlerOption"
        :option-width="205"
      ></base-table>
    </div>
    <el-dialog center title="新增/编辑公告" :visible.sync="showAddMsgDialog" width="25%">
      <el-form ref="msgForm" :model="msg">
        <el-form-item label="标题">
          <el-input v-model="msg.title" placeholder="请输入公告标题"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" :rows="10" v-model="msg.rmk" placeholder="请输入公告内容"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveMsg">保存</el-button>
        <el-button @click="showAddMsgDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    optionBtns: {
      type: Array,
      default() {
        return [
          { text: "编辑", code: "list_edit", type: "primary" },
          { text: "删除", code: "list_delete" }
        ];
      }
    },
    showToolbar: {
      type: Boolean,
      default: true
    },
    code: {
      type: String,
      default: ""
    },
    pageSizes: {
      type: Array,
      default() {
        return [15, 20, 25, 30];
      }
    }
  },
  data() {
    let me = this;
    return {
      showAddMsgDialog: false,
      activeName: "common",
      searchParam: {
        type: 0
      },
      searchTimes: [],
      msg: {
        id: "",
        type: 0,
        state: 0,
        title: "",
        rmk: ""
      },
      columns: [
        {
          prop: "title",
          label: "标题",
          width: 200
        },
        {
          prop: "rmk",
          label: "内容"
        },
        { prop: "creationTime", label: "创建时间", width: 180 }
      ],
      orderColumns: [
        {
          prop: "commodityCode",
          label: "订单号",
          custom: true,
          code: "commodityCode",
          width: 150
        },
        {
          prop: "title",
          label: "标题",
          width: 200
        },
        {
          prop: "rmk",
          label: "内容"
        },
        { prop: "creationTime", label: "创建时间", width: 180 }
      ],
      searchTimes: []
    };
  },
  created() {},
  mounted() {
    this.defaultMsg = JSON.parse(JSON.stringify(this.$data.msg));
  },
  methods: {
    viewOrder(row) {
      this.getOrderInfoById(row.orderId, true, "查看订单");
    },
    cellClick(row, column) {
      this.$emit("msg-click", row, column);
    },
    getOrderInfoById(orderId, isView, title) {
      let me = this;
      me.$http.ajax({
        url: "order/getOrderById/" + orderId,
        code: "htk",
        success: res => {
          me.order = res;
          me.order.transportation = parseInt(me.order.transportation);
          if (me.code == "home") {
            me.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$refs[
              "tabNav"
            ].addTab("NewOrder", {
              id: 999,
              name: "新建订单",
              title: title,
              parentId: 30,
              code: "NewOrder",
              resPath: "htk/order/NewOrder",
              extraData: me.order,
              isView: true
            });
          } else {
            me.$parent.addTab("NewOrder", {
              id: 999,
              name: "新建订单",
              title: title,
              parentId: 30,
              code: "NewOrder",
              resPath: "htk/order/NewOrder",
              extraData: me.order,
              isView: true
            });
          }
          me.$store.commit("setActiveTab", "NewOrder");
        }
      });
    },
    search() {
      if (this.$refs["msgTable"]) {
        this.$refs["msgTable"].initLoad();
      }
      if (this.$refs["msgOrderTable"]) {
        this.$refs["msgOrderTable"].initLoad();
      }
    },
    clickTab(tab, event) {
      if (tab.name == "common") {
        this.searchParam.type = 0;
      } else if (tab.name == "order") {
        this.searchParam.type = 1;
      }
      this.search();
    },
    handlerOption(code, row) {
      if (code == "list_edit") {
        this.editMsg(row);
      } else if (code == "list_delete") {
        this.deleteMsg(row);
      }
    },
    deleteMsg(row) {
      let me = this;
      me.$http.ajax({
        url: "message/batchDelete",
        code: "htk",
        data: {
          ids: [row.id]
        },
        success: res => {
          me.$message.success("删除成功");
          me.search();
        }
      });
    },
    addMsg() {
      this.showAddMsgDialog = true;
      this.$nextTick(() => {
        this.$refs["msgForm"].resetFields();
        this.msg = Object.assign({}, this.defaultMsg);
      });
    },
    editMsg(row) {
      this.showAddMsgDialog = true;
      this.$nextTick(() => {
        this.$refs["msgForm"].resetFields();
        let tempData = Object.assign({}, row);
        this.msg = tempData;
      });
    },
    saveMsg() {
      let me = this;
      me.$http.ajax({
        url: "message/saveMessage",
        code: "htk",
        data: me.msg,
        success: res => {
          me.$message.success("保存成功");
          me.search();
          me.showAddMsgDialog = false;
        }
      });
    }
  }
};
</script>

<style >
</style>
